<template>
  <div class="bank-page">
    <div class="setting-page-right-title">
      <div class="setting-right-name">
        <div class="setting-top-name">银行账户</div>
        <div class="setting-bottom-line"></div>
      </div>
      <div v-if="false" class="revise-button">
        <el-button>修改</el-button>
      </div>
    </div>
    <div class="bank-content">
      <div class="bank-content-top">
        <div class="bank-content-title">请及时添加银行卡，保证自荐奖金顺利发放</div>
        <div
          class="bank-upload"
          v-if="bankAccountInfo.bankCardNumber == null"
          @click="uploadBank = true;"
        >
          <img src="../../assets/img/setting/add@2x.png">
        </div>
        <div class="bank-show" :class="iconImg" v-if="bankAccountInfo.bankCardNumber != null">
          <div class="bank-show-top">
            <div class="bank-show-name">
              <!-- <i class="bank-icon" :class="'ui-banklogo-s-'+iconImg"></i> -->
              <span>{{bankAccountInfo.bankCardName}}</span>
            </div>
            <span>{{cardType}}</span>
          </div>
          <div class="bank-show-idcard">****&nbsp;&nbsp;****&nbsp;&nbsp;****&nbsp;&nbsp;{{bankCard}}</div>
          <div class="bank-show-modification" @click="uploadBank = true;">点击修改银行卡</div>
        </div>
      </div>
      <div class="bank-content-bottom">
        <div class="setting-page-right-title">
          <div class="setting-right-name">
            <div class="setting-top-name">奖金记录</div>
            <div class="setting-bottom-line"></div>
          </div>
        </div>
        <bank-table :data="bonusNoteList"></bank-table>
        <div class="tip-text">
          <p>
            提示：1.自荐奖金需入职成功且过保证期，才能发放
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.确认过保证期，7个工作日内发放自荐奖金，如有疑问请联系职位专属顾问
          </p>
        </div>
      </div>
    </div>
    <el-dialog title="添加银行卡号" :visible.sync="uploadBank" width="30%">
      <div class="bank-dialog">
        <el-form label-width="100px" label-position="right">
          <el-form-item label="银行卡号">
            <el-input
              class="theme-input"
              placeholder="请输入"
              v-model="params.bankCardNumber"
              @change="getBankInfo"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户行">
            <el-select placeholder="请选择" v-model="params.bankCardName" disabled>
              <el-option v-for="(item,index) in bank" :key="index" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="bank-dialog-text">提示：请输入正确的银行卡信息，确保银行卡信息 与本人一致，以保证自荐奖金顺利发放</el-form-item>
          <el-form-item>
            <el-button @click="submit">完成</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bankTable from './bank-table'
import bank from '@/assets/utils/bank.js'
import { request } from 'http'
export default {
  data() {
    return {
      uploadBank: false,
      err: false,
      data: [],
      bankSta: '',
      bankCard: '',
      cardType: '',
      iconImg: '',
      addSta: -1,
      params: {
        bankCardName: '',
        bankCardNumber: '',
        bankCode: ''
      },
      bonusNoteList: [],
      bankAccountInfo: {},
      bank: [
        { title: '中国工商银行', value: '中国工商银行' },
        { title: '中国农业银行', value: '中国农业银行' },
        { title: '中国建设银行', value: '中国建设银行' },
        { title: '中国农商银行', value: '中国农商银行' }
      ]
    }
  },
  methods: {
    check() {
      if (this.params.bankCardNumber == '') {
        _g.message('银行卡不能为空', 'warning')
        return false
      }
      if (this.err) {
        return false
      }
      return true
    },
    submit() {
      //点击完成按钮
      // _g.apiPost('/talent/addBankCard.do', this.params).then(res => {
      //   _g.toMessage(res)
      //   this.uploadBank = false
      // })
      if (!this.check()) return false
      _g.apiPost('/talent/updateBankCard.do', this.params).then(res => {
        _g.toMessage(res)
        this.uploadBank = false
        this.params.bankCardName = ''
        this.params.bankCardNumber = ''
        this.getData()
      })
    },
    getData() {
      _g.apiPost('/talent/initBankAccount.do', {}).then(res => {
        this.bankAccountInfo = res.data.bankCardInfo
          ? res.data.bankCardInfo
          : []
        this.bonusNoteList = res.data.bonusNoteList
          ? res.data.bonusNoteList
          : []
        this.bankSta = JSON.stringify(this.bankAccountInfo)
        if (this.bankAccountInfo.bankCardNumber != null) {
          this.bankCard = this.bankAccountInfo.bankCardNumber.slice(-4)
        }

        var BIN = require('bankcardinfo')
        BIN.getBankBin(this.bankAccountInfo.bankCardNumber)
          .then(data => {
            // console.log(data)
            this.cardType = data.cardTypeName
            this.iconImg = data.bankCode
            //console.log(this.cardImg)
          })
          .then(err => {
            console.log(err)
          })
      })
    },
    getBankInfo() {
      var BIN = require('bankcardinfo')
      BIN.getBankBin(this.params.bankCardNumber)
        .then(data => {
          this.params.bankCode = data.bankCode
          this.params.bankCardName = bank[data.bankCode]
          this.err = false
        })
        .catch(err => {
          this.params.bankCardName = err
          console.log(err)
          this.err = true
          _g.message(err, 'warning')
        })
    }
  },
  mounted() {
    this.getData()
  },
  components: {
    bankTable
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/small_logo_sprite.css';
.bank-icon {
  background-image: url('../../assets/img/small_logo_sprite.png');
}
</style>
